<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlashBee-Short-Url 短链接-密钥</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/access.css">
    <script src="/layui/js/jquery-3.7.1.min.js"></script>
    <script src="/layui/js/sweetalert.min.js"></script>
    <link rel="icon" href="/images/favicon.ico">
</head>
<body>
<div id="wrapper">
    <div id="nav">
        <h1>FlashBee-Short-Url 短链接-密钥</h1>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/access">密钥</a></li>
            <li><a href="/api" target="_blank">Api</a></li>
        </ul>
    </div>

    <div id="content">
        <h2>输入用户名，来生成你的专属密钥</h2>
        <div class="layui-form-item">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入你的用户名来生成密钥，密钥只显示一次，一定要及时保存。"
                   autocomplete="off" class="layui-input" id="username">
        </div>
        <div id="generateAccess"><p id="generateAccessKey"></p>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="down">下载</button>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-fluid" id="generate">生成密钥</button>
        </div>
    </div>
    <div id="tips">
        <h4>注意事项：</h4>
        <ul>
            <li>1.这里仅可以生成测试短链接，请勿用到线上项目。</li>
            <li>2.所有的长连接，应该以https、http开头，确保长连接是正确的url格式。</li>
            <li>3.请勿将短链接网址，密码传播。</li>
            <li style="color:red">4.生成的密钥只会显示一次，一定要及时保存下来。</li>
        </ul>
    </div>
</div>
<script>
    $("#generate").click(function () {
        $("#generateAccessKey").html("请等待，正在生成中...");
        let username = $("#username").val();
        $.ajax({
            url: "/auth/getAccessKey",
            type: "GET",
            data: {
                username
            },
            success: function (res) {
                if (res.code === 200) {
                    $("#generateAccessKey").html(res.data.AccessKey);
                } else {
                    swal("",res.message, "error")
                }
            }
        })
    })
    $("#down").click(function () {
        let text = $("#generateAccessKey").html();
        if(text===""){
            swal("","用户名不能为空", "error")
        }else{
            saveFile(text);
        }
    })

    function saveFile(text) {
        console.log(text);
        let data = text;
        let name = 'AccessKey.txt';//文件名
        exportRaw(data, name);
    }

    function exportRaw(data, name) {
        let urlObject = window.URL || window.webkitURL || window;
        let export_blob = new Blob([data]);
        let save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        save_link.click();
    }
</script>
<script src="/layui/layui.js"></script>
</body>
</html>